<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #eeeeee;
        }
        .item{
            position: relative;
            width: 40px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="item">
        <span>赞</span>
    </div>
</div>
<div class="container">
    <div class="item">
        <span>赞</span>
    </div>
</div>
<div class="container">
    <div class="item">
        <span>赞</span>
    </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $('.item').click(function () {
       addfavor(this)

    });

    function addfavor(self) {
        var fontsize=15;
        var top=0;
        var right=0;
        var opacity=1;

        var tag=document.createElement('span');
        $(tag).text('+1');
        $(tag).css('color','green');
        $(tag).css('position','absolute');
        $(tag).css('fontsize',fontsize+"px");
        $(tag).css('right',right+"px");
        $(tag).css('top',top+"px");
        $(tag).css('opacity',opacity);

        $(self).append(tag);

        var obj= setInterval(function () {
            fontsize = fontsize +10;
            top = top -5;
            right = right -5;
            opacity = opacity -0.2;

            $(tag).css('fontsize',fontsize+"px");
            $(tag).css('right',right+"px");
            $(tag).css('top',top+"px");
            $(tag).css('opacity',opacity);

            if(opacity < 0){
                clearInterval(obj)
                $(tag).remove()
            }
        },50);
    }
</script>
</body>
</html>